*{
    margin: 0px;
    padding: 0px;
    
}
body{
    height: 100vh;
    background-color: #BBE2F4;
}
#container{
    width: 320px;
    height: 100vh;
    background-image: url(images/bg.png);
    background-size: 320px auto;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}
#container .bigfish{
    width: 70px;
   height:25px;
   /*position: absolute;*/
   /*left: -10px;*/
   position: absolute;
   left: -30px;  
   animation: bigfish 2s ease-out forwards;
}

  
    
    /*样式*/
    @keyframes bigfish{
        from{
            transform:translate(-30px,0px);
        }
        to{
            transform: translate(50px,0px);
        }
        
    }
    #container .text{
        width: 200px;
        height: 20vh;
        position: absolute;
        right: calc(50% - 200px/2) ;
        top: 80px;
        animation: textanimation 2s ease-out forwards;
    }
    
    
    @keyframes textanimation{
        0%{
            transform: translate(200px,0px);
        }
        100%{
            transform: translate(0px,0px);
        }
    }
    #container .ice{
        width: 200px;
        height: 200px;
        position: absolute;
        left: calc(50% - 200px/2);
        bottom:-100px;
        animation: iceanimation1 3s linear ,iceanimation2 1s linear 3.1s infinite;
        
    }
    
    
    @keyframes iceanimation1{
        0%{
            transform: translate(0px,0px);
        }100%{
            transform: translate(0px,-200px);
        }
    }
    @keyframes iceanimation2{
        0%{
            transform: translate(0px,-200px);
        }
        50%{
            transform: translate(0px,-195px);
        }
        100%{
            transform: translate(0px,-200px);
        }
    }
    #container .water{
        width:320px;
        height: 200px;
        position: absolute;
        bottom:0px;
    }
    #container .firstfish{
        width:45px;
        height: 23px;
        position: absolute;
        left: 0px;
        bottom: 160px;
        animation: firstfish 5s linear infinite;
    }
    @keyframes firstfish{
        0%{
            transform: translate(-20px,0px);
        }
        100%{
            transform: translate(360px,0px);
        }
    }
    #container .second-fish{
        position: absolute;
        right: 0px;
        bottom: 100px;
         animation: second-fish 5s linear infinite;
    }
    
    @keyframes second-fish{
        0%{transform: translate(30px,0px);
            
        }
        100%{
            transform: translate(-360px,0px);
        }
    }
    #container .bubble{
        width: 50px;
        height: 80px;
        position: absolute;
        left: 30px;
        bottom: 60px;
        opacity: 0;
        animation: bubble 0.6s ease-in 3.1s forwards;
    }
    @keyframes bubble{
       0%{
           transform: translate(0px,-80px)
           scale(o.1);
           opacity:0;
           
       }
       100%{
           transform: translate(0px,0px)scale(1);
           opacity: 1;
       }
    }
    #container .weixin{
        width: 80px;
        left: 80px;
        position: absolute;
        left: calc(50% - 80px/2);
        bottom: 80px;
    }
    #container .musicplay{
        width: 30px;
        height: 30px;
        background-image: url(images/muted.png);
        background-size: 100%;
        position: absolute;
        right: 10px;
        top: 10px;
    }